<template>
  <div v-if="visible">
    <el-dialog :visible.sync="visible"
               title="白名单规则"
               :modal="false"
               class="user-dialog add-or-updata"
               width="70%"
               :before-close="closeDialog"
               :close-on-click-modal="false"
               :close-on-press-escape="false">
      <el-button plain
                 style="margin-left:20px;margin-bottom: 10px;"
                 @click="addWin()">新增</el-button>
      <table-template :tableData='tableData'
                      :loading='dataListLoading'
                      :fieldManagement='false'
                      :index='true'
                      :dataList='dataList'>
        <template slot="ruleName-after">
          <el-table-column prop="authorize"
                           label="授权时长"
                           header-align="center"
                           align="center"
                           width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.authorize != '' && scope.row.authorizeType === '0'">{{scope.row.authorize}} 周</span>
              <span v-if="scope.row.authorize != '' && scope.row.authorizeType === '1'">{{scope.row.authorize}} 月</span>
              <span v-if="scope.row.authorize != '' && scope.row.authorizeType === '2'">{{scope.row.authorize}} 年</span>
              <span v-if="scope.row.authorizeType === '3'">长期</span>
            </template>
          </el-table-column>
        </template>
        <template slot="ruleDescription-before">
          <el-table-column prop="startTime"
                           label="每日停车时段"
                           header-align="center"
                           align="center"
                           width="200">
            <template slot-scope="scope">
              <span v-if="scope.row.startTime">{{scope.row.startTime}} - {{scope.row.finishTime}}</span>
            </template>
          </el-table-column>
        </template>
        <el-table-column prop="status"
                         label="运行状态"
                         min-width="100"
                         align="center">
          <template slot-scope="scope">
            <span :class="scope.row.status === '0'? 'success':''">
              {{scope.row.status === '0' ? '启用' : '禁用'}}
            </span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('handle')"
                         fixed='right'
                         header-align='center'
                         align='center'
                         width='150'>
          <template slot-scope='scope'>
            <el-button type='text'
                       class='brand'
                       @click='setStatus1(scope.row)'
                       size='small'>{{scope.row.status === '1' ? '启用':'禁用'}}</el-button>
            <el-button type='text'
                       class='brand'
                       @click='addWin(scope.row)'
                       size='small'>修改</el-button>
            <el-button type='text'
                       size='small'
                       class='danger'
                       @click='deleteHandle({id:scope.row.id})'>{{ $t('delete')}}</el-button>
          </template>
        </el-table-column>
      </table-template>
      <el-pagination :current-page='page'
                     :page-sizes='[10,20,50,100]'
                     :total='total'
                     layout='total, sizes, prev, pager, next'
                     @size-change='pageSizeChangeHandle'
                     @current-change='pageCurrentChangeHandle'>
      </el-pagination>
      <whiteListRuleaddorupdate ref="addOrUpdate"
                                @callBack="getDataList" />
    </el-dialog>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import mixinViewModule from '@/mixins/view-module'
import minFormValidate from '@/mixins/form-validate'
import tableTemplate from '@/components/table-template'
import Search from '@/components/search/search'
import whiteListRuleaddorupdate from './whiteListRule-add-or-update.vue'
export default {
  mixins: [mixinViewModule, minFormValidate],
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/tb/authorizationRules/pagingQuery', // 数据列表接口，API地址
        getDataListIsPage: true, // 数据列表接口，是否需要分页？
        addOrUpdateURL: '', // 添加或修改接口，API地址
        getDataInfoURL: '', // 数据详情，API地址
        updateStatusURL: '',
        deleteURL: '/tb/authorizationRules/del', // 删除接口，API地址
        deleteIsBatch: true, // 删除接口，是否需要批量？
        exportURL: '' // 导出接口，API地址
      },
      dataForm: {
      },
      visible: false
    }
  },
  components: { tableTemplate, Search, whiteListRuleaddorupdate },
  computed: {
    ...mapState({
      // typeList: state => state.dict.typeList
    }),
    tableData () {
      return [
        { label: '规则名称', width: '100', prop: 'ruleName' },
        { label: '规则描述', width: '80', prop: 'ruleDescription' },
        { label: '创建人', width: '100', prop: 'creatorName' },
        { label: '创建时间', width: '150', prop: 'createDate' }
      ]
    }

  },
  methods: {
    sumbit () {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          this.getPageInit()
        }
      })
    },
    init () {
      this.visible = true
    },
    closeDialog () {
    //   this.$refs.dataForm.resetFields()
      this.$emit('callBack')
      this.visible = false
    },
    setStatus1 (_row) {
      let arr = {}
      arr.id = _row.id
      if (_row.status === '0') {
        arr.status = '1'
      } else {
        arr.status = '0'
      }
      this.$http.put('/tb/authorizationRules/status', arr).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.getPageInit()
      })
    },
    addWin (_id) {
      if (_id) {
        this.$refs.addOrUpdate.init(_id)
      } else {
        this.$refs.addOrUpdate.init()
      }
    },
    goBack () {
      this.$router.push({ name: 'authorWhiteList-authorWhiteList' })
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
